<template>
	<view class="container">
		<bottom-rect type="normal"></bottom-rect>
		<!-- 内容大盒子 -->
		<view class="index_box">
			<!-- 首页顶部的导航 -->
			<view class="top_bar">
				<!-- 搜索框 -->
				<view class="search" @click="navigate_to_search">
					<image style="width: 32rpx; height: 32rpx; margin-right: 10rpx;" src="/static/index/search.png">
					</image>
					<text style="font-size: 32rpx;color: #B1B1B1;">丢失物品，一键搜索</text>
				</view>
				<!-- 导航栏 -->
				<view class="navigators">
					<view :class="[{'activeIndex':activeIndex==index}, 'navigator_titles']"
						v-for="(item, index) in navigator_titles" :key="index" @click="toggle_navigataor(index)">
						{{item}}
					</view>
				</view>
			</view>

			<!--  首页展示内容区域 -->
			<view class="content_box">
				<!-- 标题 -->
				<view class="title main-font-color font-weight-bold">{{navigator_titles[activeIndex]}}</view>
				<view class="empty_tips" v-if="dataList.length == 0">
					<!-- 当没内容的时候显示 -->
					<image src="../../static/index/emptyBox.png"></image>
					<text>什么都没有</text>
				</view>

				<!-- 内容列表 -->
				<view class="content_list">
					<index-list-item class="index_list_item" :dataList="dataList"></index-list-item>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import bottomRect from '@/components/bottomRect/bottomRect.vue'
	import indexListItem from '@/components/indexListItem/indexListItem.vue'

	import {
		mapState,
		mapMutations
	} from 'vuex'

	// 获取app实例
	const app = getApp()

	export default {
		name: 'index',
		components: {
			bottomRect,
			indexListItem
		},
		data() {
			return {
				// 导航栏的分类
				navigator_titles: ['全部', '只看失物', '只看寻物'],
				// 导航当前处于活跃的位置
				activeIndex: 0,
				// 首页数据
				dataList: [],
				// 调用的云函数名称
				cloudFunName: 'get_all_datas',
				// 节流阀，是否已经开始触底加载
				isloading: false,
				// 每次请求的数据量
				requestNums: 8,
				// 当前的页数
				currentPageNum: 1,
				// 数据的总数
				datasSum: 0
			}
		},
		computed: {
			// 映射状态管理的state
			...mapState({
				// 聊天室的登录转状态,默认状态为false
				isSDKReady: state => state.isSDKReady
			})
		},
		methods: {
			// 映射状态管理的mutations
			...mapMutations(['change_SDK_state']),

			// 跳转到搜索页面
			navigate_to_search() {
				uni.navigateTo({
					url: '/subpkg/searchPage/search/search'
				})
			},

			// 获取数据库的总数
			get_count_num() {
				uni.showLoading({
					title: '加载中...'
				})
				wx.cloud.callFunction({
					name: 'count_num',
					data: {
						type: this.activeIndex
					}
				}).then(res => {
					console.log(res);
					this.datasSum = res.result.total
					// 到达顶部后进行数据请求
					this.whichCloudFun(this.activeIndex)
					this.get_data()
				})
			},

			// 调用云函数获取数据
			get_data() {
				console.log(this.cloudFunName);
				wx.cloud.callFunction({
					name: this.cloudFunName,
					data: {
						requestNums: this.requestNums,
						currentNum: this.dataList.length
					}
				}).then(res => {
					console.log(res);
					this.dataList = [...this.dataList, ...res.result.data]
					this.isloading = false
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			},

			// 判断调用哪个云函数
			whichCloudFun(index) {
				// 判断调用哪个函数
				switch (index) {
					case 0:
						this.cloudFunName = 'get_all_datas'
						break
					case 1:
						this.cloudFunName = 'get_lost_datas'
						break
					case 2:
						this.cloudFunName = 'get_found_datas'
						break
				}
			},

			// 切换导航并刷新获取数据,下拉刷新也是调用此方法
			toggle_navigataor(index) {
				this.dataList = []
				this.activeIndex = index
				uni.showLoading({
					title: '加载中...'
				})
				uni.pageScrollTo({
					scrollTop: 0
				}).then(() => {
					this.currentPageNum = 1
					this.get_count_num()
				})
			},
		},

		// 当登录的时候改变聊天室的登录状态
		created() {
			uni.$on('isSDKReady', value => {
				this.change_SDK_state(value.isSDKReady)
				setTimeout(() => {
					uni.$TUIKit.updateMyProfile({
						nick: app.globalData.userInfo.nickname,
						avatar: app.globalData.userInfo.avatarUrl
					})
				}, 1000)
			});
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.dataList = []
			this.toggle_navigataor(this.activeIndex)
		},

		// 触底加载
		onReachBottom() {
			// 判断数据是否已经加载完毕
			if (this.currentPageNum * this.requestNums >= this.datasSum) {
				return uni.showToast({
					title: '我也是有底线的',
					icon: 'none'
				})
			}
			// 如果当前没在触底加载状态就执行
			if (!this.isloading) {
				this.isloading = true
				uni.showLoading({
					title: '加载中...'
				})
				this.currentPageNum++
				this.whichCloudFun(this.activeIndex)
				this.get_data()
			}
		},

		// 当页面首次显示
		onLoad() {
			// 获取数据库的数量
			this.get_count_num()
		},

		// 当页面展示时
		onShow() {
			// 获取结果，判断用户是否已登录
			const hasUserInfo = app.hasUserInfo()
			if (!hasUserInfo) {
				return uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.activeIndex {
		color: white !important;
		background-color: #014da1 !important;
	}

	.container {
		background-color: #F7F7F7;
		width: 100vw;
		// height: 100vh;
	}

	.index_box {
		display: flex;
		flex-direction: column;
		align-items: center;

		// 首页顶部的导航
		.top_bar {
			box-sizing: border-box;
			width: 700rpx;
			height: 204rpx;
			border-radius: 20rpx;
			box-shadow: 0 0 8px #b8b8b8;
			margin-top: -90rpx;
			margin-bottom: 30rpx;
			background-color: white;
			padding: 26rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: sticky;
			top: -110rpx;

			// 搜索框
			.search {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 640rpx;
				height: 74rpx;
				border-radius: 100rpx;
				border: 2rpx solid #014DA1;
				background-color: white;
			}

			// 导航栏
			.navigators {
				display: flex;

				.navigator_titles {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 160rpx;
					height: 55rpx;
					border-radius: 50rpx;
					background-color: #EDF1FD;
					color: #504F54;
					font-size: 32rpx;
					font-weight: bold;
					margin-right: 30rpx;
				}
			}
		}

		// 首页展示内容区域
		.content_box {
			width: 700rpx;
			border-radius: 20rpx 20rpx 0 0;
			box-shadow: 0 0 8px #b8b8b8;
			box-sizing: border-box;
			padding: 26rpx;
			background-color: white;

			// 标题
			.title {
				font-size: 40rpx;
			}

			.empty_tips {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 150rpx;
				margin-bottom: 50vh;

				// 空图片
				image {
					width: 300rpx;
					height: 300rpx;
				}

				text {
					color: #B3B3B3;
					font-size: 32rpx;
				}
			}

			// 内容列表
			.content_list {
				width: 700rpx;
			}
		}
	}
</style>
